<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>修改专属书籍</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <style>
    .select-input .select-input-content {
      width: 100% !important;
    }
  </style>
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">

  <div class="layui-form-item">
    <label class="layui-form-label">专属书籍</label>
    <div class="layui-input-block">
      <input type="text" name="title" value="{$novel.title}" required  lay-verify="required"  autocomplete="off" class="layui-input" disabled>
      <input type="hidden" name="ex_nid" value="{$novel.id}" required  lay-verify="required">
      <input type="hidden" id="is_add" name="is_add" value="0">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">授权代理</label>
    <div class="layui-input-block">
      <input type="hidden" id="agents" name="agents" value="">
      <div id="empwoer" class="demo-transfer"></div>
    </div>
  </div>


  <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','transfer'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,layer = layui.layer
            ,form = layui.form
            ,transfer = layui.transfer;

    //监听提交
    form.on('submit(LAY-user-role-submit)', function(data){
      layer.msg(JSON.stringify(data.field));
      return false;
    });

    var all = '{$all}';
    var have = '{$have}';
    var all = JSON.parse(HTMLDecode(all));
    var have = JSON.parse(HTMLDecode(have));
    $("#agents").val(have);

    //定义标题及数据源
    transfer.render({
      elem: '#empwoer'
      , showSearch: true
      , title: ['未授权代理', '已授权代理']  //自定义标题
      , data: all
      , width: 250 //定义宽度
      , height: 400 //定义高度
      , value: have
      , onchange: function (obj, index) {
        var agents = $("#agents").val();
        if (index === 0) {
          var str = '';
          for (let i = 0; i < obj.length; i++) {
            if (i === 0) {
              str = obj[i]['value'];
            } else {
              str += ',' + obj[i]['value'];
            }
          }
          if (!agents) {
            $("#agents").val(str);
          } else {
            $("#agents").val(agents + ',' + str);
          }
        } else {
          var idArr = agents.split(',');
          for (let i = 0; i < idArr.length; i++) {
            idArr[i] = parseInt(idArr[i]);
          }
          console.log(idArr);
          for (let i = 0; i < obj.length; i++) {
            let index = idArr.indexOf(obj[i]['value']);
            console.log("查询："+obj[i]['value']);
            console.log("下标："+index);
            if (index !== -1) {
              idArr.splice(index, 1);
            }
          }
          $("#agents").val(idArr.join());//"1,2,3,4,5,6"
        }
      }
    })

    function HTMLDecode(text) {
      var temp = document.createElement("em");
      temp.innerHTML = text;
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    }

  });
</script>
</body>
</html>
